<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
    
      <div class="btn-box">
          <a
          class="el-button el-button--success el-button--medium"
          href="http://123.57.59.222:8081/api/file/po_course_template.xlsx"
          type="primary"
        >模版下载</a>
          <el-upload
            :action="UploadUrl()"
             :show-file-list="false"
             
            :on-success="handleImageSuccess"
         
          class="upload_image"
        >
          <el-button type="primary" v-show='roleName=="admin"'>导入</el-button>
        </el-upload>
        <el-button
          :loading="downloadLoading"
          type="primary"
          icon="el-icon-document"
          @click="dowloadExcel"
          >导出excel</el-button
        >
      </div>
      <div v-show="showbtns == true" class="search-lf">
        <el-form-item label="PO">
          <el-input v-model="listQuery.po" placeholder="PO"></el-input>
        </el-form-item>
        <el-form-item width="200px" label="客户名称">
          <el-input
            v-model="listQuery.customerName"
            placeholder="客户名称"
          ></el-input>
        </el-form-item>
           <el-form-item width="200px" label="课程名称">
          <el-input
            v-model="listQuery.courseName"
            placeholder="课程名称"
          ></el-input>
        </el-form-item>
        <el-form-item class="" label='状态'>
          <el-select v-model='listQuery.courseState'> 
            <el-option label='未启动' value='未启动'></el-option>
            <el-option label='进行中' value='进行中'></el-option>
            <el-option label='已交付' value='已交付'></el-option>
             <el-option label='已验收' value='已验收'></el-option>
            <el-option label='已完结' value='已完结'></el-option>
            <el-option label='已终止' value='已终止'></el-option>
          </el-select> 
        </el-form-item>
           <el-form-item class="regin_search" label="课程编导">
          <el-select
            filterable
            clearable
            v-model="listQuery.courseChargeName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in courseChargeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="战区">
          <el-select filterable
            v-model="listQuery.regionName"
            
            clearable
            @change="handleChangePro4($event)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in regiosList"
              :key="item.id"
              :label="item.region"
              :value="item.region"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份">
          <el-select filterable
            v-model="listQuery.provinceName"
            
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in allProvinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.province"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList()">查询</el-button>
          <!-- <el-button type="primary" @click="handleAdd()">新增课程</el-button>
        <el-button type="primary" @click="handleExport()">导入课程</el-button>-->
        </el-form-item>
      </div>
    </el-form>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="60px" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="130px" label="PO单号">
        <template slot-scope="{ row }">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column>

      <el-table-column sort align="center" width="100px" label="战区">
        <template slot-scope="{ row }">
          <span>{{ row.regionName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" label="省份">
        <template slot-scope="{ row }">
          <span>{{ row.provinceName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" label="成功部门">
        <template slot-scope="{ row }">
          <span>{{ row.teamName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" width="200px" label="客户名称">
        <template slot-scope="{ row }">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程编导">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select filterable
              v-model="corsesList.courseChargeName"
              @change="handleCouseChangeName($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in courseChargeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程ID">
        <template slot-scope="{ row }">
          <span>{{ row.courseId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学科门类">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select filterable v-model="corsesList.subjectCategoryName"    @change="handleChangeSubject($event)" placeholder="请选择">
              <el-option
                v-for="item in subjectTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.subjectCategoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="专业分类">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input
              v-model="corsesList.majorCategory"
              placeholder="请选择"
            ></el-input>
          </template>
          <span v-else>{{ row.majorCategory }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" width="180px" label="课程名称">
        <template slot-scope="{ row }">
            <template v-if="row.rowEdit">
              <el-input v-model="corsesList.courseName" ></el-input>
            </template>
          <span v-else>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="前期沟通进度">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select filterable
              v-model="corsesList.earlyExchangeName"
              @change="handleChangePro2($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in courseExchange"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.earlyExchangeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label=" 讲师姓名">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.teacher" placeholder></el-input>
          </template>
          <span v-else>{{ row.teacher }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150px" label="联系方式">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.phone" placeholder></el-input>
          </template>
          <span v-else>{{ row.phone }}</span>
        </template>
      </el-table-column>
     

      <el-table-column align="center" width="120px" label="课程类别">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select filterable
              v-model="corsesList.courseTypeName"
              @change="handleChangePro5($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in courseTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.courseTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拍摄形式">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select filterable
              v-model="corsesList.shootModeName"
              @change="handleChangePro7($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in shootModeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.shootModeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="预估数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.estimateQuantity" />
          </template>
          <span v-else>{{ row.estimateQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="140px" label="预估时长（分钟）">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input type='number' v-model="corsesList.estimateTimeLength" />
          </template>
          <span v-else>{{ row.estimateTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="样片确认">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <!-- <el-date-picker
              v-model="corsesList.sampleConfirmDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker> -->
            <el-select filterable v-model="corsesList.sampleConfirm">
              <el-option label="否" value="0"> </el-option>
              <el-option label="是" value="1"> </el-option>
            </el-select>
          </template>
          <span v-else>{{ row.sampleConfirm | qrFilter }}</span>
        </template>

        <!-- <template slot-scope="{row}">
           <span>{{ row.contractDeliveryTime }}</span>
        </template>-->
      </el-table-column>

      <el-table-column align="center" width="120px" label="开始拍摄日期">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.shootStartDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.shootStartDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="开始制作日期">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.makeStartDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.makeStartDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="项目交付日期">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.projectDeliveryDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.projectDeliveryDate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="拍摄数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.shootQuantity" />
          </template>
          <span v-else>{{ row.shootQuantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="初版数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.firstEditionQuantity" />
          </template>
          <span v-else>{{ row.firstEditionQuantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="终版数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.endEditionQuantity"></el-input>
          </template>
          <span v-else>{{ row.endEditionQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160px" label="终版时长">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit"> 
            <el-input
              v-model="corsesList.endEditionTimeLength"
              placeholder="hh:mm:ss格式"
            ></el-input>
          </template>
          <span v-else>{{ row.endEditionTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="宣传片">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <!-- <el-input v-model="corsesList.businessSundryFee"></el-input> -->
            <el-select filterable v-model="corsesList.isTrailer" placeholder="请选择">
              <el-option label="已制作" value="2"></el-option>
              <el-option label="未制作" value="1"></el-option>
              <el-option label="无" value="0"></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.isTrailer | statusxcFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="完成度">
        <template slot-scope="{ row }">
          <span>{{ row.degreeOfCompletion }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="课程合同金额">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input type='number' v-model="corsesList.contractAmount"></el-input>
          </template>
          <span v-else>{{ row.contractAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="已回款">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.contractPaymentReceived"></el-input>
          </template>
          <span v-else>{{ row.contractPaymentReceived }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="未回款">
        <template slot-scope="{ row }">
          <!-- <template v-if="row.rowEdit">
            <el-input v-model="corsesList.contractOutstandingPayment"></el-input>
          </template> -->
          <span>{{ row.contractOutstandingPayment }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="150px"
        label="预估供应商总金额"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.estimatedGenerationCost"></el-input>
          </template>
          <span v-else>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="供应商已结款"
      >
        <template slot-scope="{ row }">
          <span>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="供应商未结款"
      >
        <template slot-scope="{ row }">
          <span>{{ row.supplierUnpaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="120px" label="上线平台">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.onlinePlatform"></el-input>
          </template>
          <span v-else>{{ row.onlinePlatform }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="上线情况">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select filterable
              v-model="corsesList.onlineName"
              @change="handleChangePro6($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in CourseLineState"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.onlineName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="合同交付时间"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.contractDeliveryDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.contractDeliveryDate }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="120px" label="课程进度">
        <template slot-scope="{ row }">
          <span>{{ row.courseScheduleName }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态">
     
          <template slot-scope="{ row }">
            <template v-if="row.rowEdit==true&&roleName=='admin'||row.rowEdit==true&&isRoldB==4">
           
            <el-select v-model="corsesList.courseState" @visible-change="changeType(row)">
               <el-option
                v-for="item in courseStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
          
            </el-select>
          </template>
          <span v-else>{{ row.courseState }}</span>
          </template>
    
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="课程进度备注"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.courseScheduleRemark"></el-input>
          </template>
          <span v-else>{{ row.courseScheduleRemark }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="120px" label="上传验收单">
        <template slot-scope="{ row }">
         
          <template v-if="row.rowEdit&&cousreStateTemp=='已交付'">
             <el-button type="text" @click="handleFile">点击上传</el-button>
           
          </template>
          <!-- <span v-else>{{ fileTest}}</span> -->
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="200px" label="验收单描述">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.acceptanceReportDesc"></el-input>
          </template>
          <span v-else>{{ row.acceptanceReportDesc }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" label="操作" width="270">
        <template slot-scope="{ row }">
            <!-- <el-button
              v-show='roleName=="admin"'
              class="mg-l"
              type="info"
                 @click="handleEditStatus(row)"
              size="mini"
              icon="el-icon-s-tools"
              >编辑课程状态</el-button> -->
          <router-link
            :to="
              '/po_course_supplier?id=' +
              row.id +
              '&poId=' +
              row.poId +
              '&po=' +
              row.po +
              '&name=' +
              row.courseName +
              '&course=' +
              row.courseChargeName+'&page='+listQuery.page
            "
            class="link-type"
          >
            <el-button
              class="mg-l"
              type="warning"
              size="mini"
              icon="el-icon-s-tools"
              >分配供应商</el-button>
          </router-link>

          <el-button
            v-if="row.rowEdit"
            type="success"
            size="mini"
            style="margin-left: 10px"
            icon="el-icon-circle-check-outline"
            @click="confirmRole(row)"
            >保存</el-button
          >
          <el-button
            v-else
            type="primary"
            size="mini"
            style="margin-left: 10px"
            :disabled="editDisabled == true"
            icon="el-icon-edit"
            @click="handleEdit(row)"
            >编辑</el-button
          >

          <el-button
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
      <el-dialog title="上传验收单" :visible.sync="dialogFormVisible">
        <el-form :model="formYSD" :rules="rules">
          <el-form-item label="验收时长" label-width="180" prop='receptTimeLength'>
            <el-input style="width:180px" placeholder='hh:mm:ss' v-model="formYSD.receptTimeLength" autocomplete="off"></el-input>
            <span style="color:red;font-weight:bold">例:00:00:00</span>
          </el-form-item>
          <el-form-item label="上传验收单" label-width="180">
            <el-upload
              :data="dataObj"
              :show-file-list="false"
              class="upload-demo"
              :before-upload="beforeUpload"
              action="http://123.57.59.222:8081/api/file/course_acceptance_report/upload"
              :on-success="handlePreview"
            >
              <!-- <el-button size="mini" type="primary">点击上传</el-button> -->
              <i class="el-icon-upload"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleYSD()">确 定</el-button>
        </div>
      </el-dialog>
    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  courseListF,
  updateCourses,
  delCourse,
  contractPO,
  getProvinces,
  poCourses,
  getCourseStatus
} from "@/api/supplier";

import {
  getProductType,
  getContractType,
  getCourseType,
  getShootMode,
  getCourseCharge,
  getCourseExchange,
  getCourseSchedule,
  getCourseLineState,
  getSubjectCate,
  baseUrl2,
} from "@/api/remote-search";
import{exportPocourse} from '@/api/exportExcel'
import { regiosList } from "@/api/user";
import { RegionsProvince } from "@/api/region";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "corsesList",
  components: { Pagination },
  filters: {
    qrFilter(status) {
      const statusMap = {
        0: "未确认",
        1: "已确认",
      };
      return statusMap[status];
    },
    statusColorFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger",
        3: "warning",
        4: "info",
        5: " ",
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        1: "进行中",
        2: "已完成",
        3: "已过期",
        0: "新合同",
      };
      return statusMap[status];
    },
    statusxcFilter(status) {
      const statusMap = {
        1: "未制作",
        2: "已制作",

        0: "无",
      };
      return statusMap[status];
    },
  },
  data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验收时长不能为空'));
        }
        setTimeout(() => {
          if ( value) {
          var regS = new RegExp("\\：", "g");
           value = value.replace(
            regS,
            ":");
            let tempTime= value;
            let temp=tempTime.split(':');
            if(temp[1]>60||temp[2]>60){
              return callback(new Error('请输入正确的时间格式，分钟和秒不能大于60'));
             
           
            }
           
        }
        }, 1000);
      };
    return {
      isRoldB:sessionStorage.getItem('roidB'),
      rules: {
          receptTimeLength: [
            {  validator: checkAge,  trigger: 'blur' },
            ]},
      formYSD:{
        receptTimeLength:''
      },//验收单
        dialogFormVisible: false,//上传验收单
      showbtns: false,
      list: [],
      editDisabled: false,
      dataObj: { id: "" ,receptTimeLength:null},
      fileTest:'',
      uploadUrl:'',
      roleName:sessionStorage.getItem('memberName'),
      downloadLoading: false,
      courseList: [], //课程编导list
      courseChargeList: [], //课程编导
      courseExchange: [], //前期课程进度
      courseTypeList: [], //课程类别
      shootModeList: [], //拍摄形式
      CourseSchedule: [], //课程进度
      CourseLineState: [], //课程上线状态
      subjectTypeList: [], //学科门类
      onlineList: [], //上线情况
      majorList: [], //专业分类
      multipleSelection: "", //多选
      isSure: true,
      rowEdit: false,
      newPoId: "", //新增之后返回的id

      productTypeList: [], //课程编导集合
      productLineList: [], //课程ID集合
      contracTypeList: [], //合同类型
      provinceList: [], //战区省份
      allProvinceList:[],//所有省份
      regiosList: [], // 讲师姓名
      corsesList: {},
      total: 0,
      cousreStateTemp:'',//获取po状态
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,
        provinceName: "",
        customerName: "",
        regionName: "",
        po: "",
        pageSize: 20,
      },

      poId: "", //POid
      rolesList: [],//角色集合

      dialogVisible: false,//弹出框隐藏
      dialogType: "new",
      checkStrictly: false,

      ids: "",
      idsPo: "",
      courseStateOptions:[{
          value: '未启动',
          label: '未启动',
           disabled: true
        }, {
          value: '进行中',
          label: '进行中',
          disabled: true
        }, {
          value: '已交付',
          label: '已交付',
           disabled: true
        }, {
          value: '已验收',
          label: '已验收',
           disabled: true
        }, {
          value: '已完结',
          label: '已完结',
           disabled: true
        },
        {
          value: '已终止',
          label: '已终止',
           disabled: false
        }]
    };
  },
  created() {
  
    this.listQuery.page=parseInt(this.$route.query.page);
 
    this.getList();
    this.getListes();
  },
  computed: {},

  methods: {
    changeType(e){
      let _this=this;
      
      this.courseStateOptions.forEach((v,i)=>{
         if(this.roleName=='admin'){
           v.disabled=false
           return false
         }
        let c=i+1; 
         if(_this.cousreStateTemp=='已交付'){
               this.courseStateOptions[4].disabled=true;
               return false
            }
         if(v.label==_this.cousreStateTemp){
           
          this.courseStateOptions[c].disabled=false;
           
         }
      })
        this.courseStateOptions[5].disabled=false;
    },
    handleClose() {
      this.editDisabled = false;
    },
     UploadUrl(){
      return baseUrl2+'/api/file/import_po_course'
    }, 
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    handleImageSuccess(file) {
      if (file.code == 200) {
        this.$message.success(file.message);
        this.getList();
      } else {
        this.$message.error(file.message);
      }
    },
    handlePreview(file) {
    //  this.$message.success('验收单上传成功')
     console.log(file)
     if(file.code!=200){
       this.$message.error(file.message)
     }else{
        this.$message.success(file.message)
     }
    },
    handleError(file){
      this.$message.error('验收单上传失败')
    },
    dowloadExcel() {
      exportPocourse(this.listQuery );
      // window.location.href =
      //   baseUrl2 +
      //   "/api/file/export_po_course?customerName=" +
      //   this.listQuery.customerName +
      //   "&provinceName=" +
      //   this.listQuery.provinceName +
      //   "&regionName=" +
      //   this.listQuery.regionName;
    },

    getListes() {
      console.log(this.isRoldB+'hhhhh')
        getProvinces().then((res) => {
        this.allProvinceList = res.data.data;
      });
      getProductType().then((res) => {
        this.productTypeList = res.data.data;
      });
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data;
      });
      getContractType().then((res) => {
        this.contracTypeList = res.data.data;
      });
      // getProvinces().then((res) => {
      //   this.provinceList = res.data.data;
      // });
      regiosList().then((res) => {
        this.regiosList = res.data.data;
      });
      getCourseExchange().then((res) => {
        this.courseExchange = res.data.data;
      });
      getCourseType().then((res) => {
        this.courseTypeList = res.data.data;
      });
      getShootMode().then((res) => {
        this.shootModeList = res.data.data;
      });
      getCourseSchedule().then((res) => {
        this.CourseSchedule = res.data.data;
      }),
        getCourseLineState().then((res) => {
          this.CourseLineState = res.data.data;
        });
      getSubjectCate().then((res) => {
        this.subjectTypeList = res.data.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      
      let res = [];
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((r) => {
          res.push(r.id);
        });
        this.idsPo = res.join(",");
       
      }
    },
    handleChangePro(id) {
      let obj = {};
      obj = this.productTypeList.find((item) => {
        return item.name === id;
      });
     
      this.corsesList.productTypeId = obj.id;
    },
    handleChangePro2(id) {
      let obj = {};
      obj = this.courseExchange.find((item) => {
        return item.name === id;
      });
      this.corsesList.earlyExchangeId = obj.id;
    },
    handleCouseChangeName(id) {
      let obj = {};
      obj = this.courseChargeList.find((item) => {
        return item.name === id;
      });
      this.corsesList.courseChargeId = obj.id;
      
    },
    handleChangeSubject(id) {
      let obj = {};
      obj = this.subjectTypeList.find((item) => {
        return item.name === id;
      });
      this.corsesList.subjectCategoryId = obj.id;
    },

    handleChangePro4(id) {
      let obj = {};
      obj = this.regiosList.find((item) => {
        return item.region === id;
      });
      this.corsesList.regionId = obj.id;
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data;
      });
    },
    handleChangeCourse() {
      let obj = {};
      obj = this.courseChargeList.find((item) => {
        return item.name === id;
      });
      this.corsesList.courseChargeId = obj.id;
    },
    handleChangePro5(id) {
      let obj = {};
      obj = this.courseTypeList.find((item) => {
        return item.name === id;
      });
      this.corsesList.courseTypeId = obj.id;
    },
    handleChangePro6(id) {
      let obj = {};
      obj = this.CourseLineState.find((item) => {
        return item.name === id;
      });
      this.corsesList.onlineId = obj.id;
    },
    beforeUpload() {

      this.dataObj.id = this.corsesList.id;
      this.dataObj.receptTimeLength=this.formYSD.receptTimeLength;
      
    },
    handleChangePro7(id) {
      let obj = {};
      obj = this.shootModeList.find((item) => {
        return item.name === id;
      });
      this.corsesList.shootModeId = obj.id;
      
    },

    handleChangePro8(id) {
      let obj = {};
      obj = this.CourseSchedule.find((item) => {
        
        return item.name === id;
      });
      this.corsesList.courseScheduleId = obj.id;
    },
    //点击上传验收单
    // 
    handleFile(){
      this.formYSD.receptTimeLength=''
  this.dialogFormVisible = true
    },
    getList() {
      this.editDisabled = false;
      this.listLoading = true;
      courseListF(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
         
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleDel(id) {
      this.$confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delCourse(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  
    handleEdit(row) {
      console.log(row)
      this.editDisabled = true;
      this.dialogType = "edit";

      getCourseStatus(row.id).then(res=>{
        this.cousreStateTemp=res.data.message
        console.log(this.cousreStateTemp)
      })
      this.corsesList = row;
      row.rowEdit = !row.rowEdit;
      this.corsesList.id = row.id;
         this.courseStateOptions.forEach((v)=>{
        v.disabled=true
      })
    },
    handleAdd() {
      //this.role = Object.assign({}, defaultRole);

      this.dialogType = "new";
      this.dialogVisible = true;
    },
  handleYSD(){
      this.getList();
    this.dialogFormVisible = false
  },  
    confirmRole(row, id) {
      const isEdit = this.dialogType === "edit";
      if (isEdit) {
        this.corsesList.rowEdit = false;
        if (this.corsesList.endEditionTimeLength) {
          var regS = new RegExp("\\：", "g");
          this.corsesList.endEditionTimeLength = this.corsesList.endEditionTimeLength.replace(
            regS,
            ":");
            let tempTime=this.corsesList.endEditionTimeLength;
            let temp=tempTime.split(':');
            if(temp[1]>60||temp[2]>60){
              this.$message.error('请输入正确的时间格式，分钟和秒不能大于60');
             
              row.rowEdit = true;
              return false
            }
           
        }
        this.corsesList.contractOutstandingPayment =
          this.corsesList.contractAmount -
          this.corsesList.contractPaymentReceived;
        updateCourses(this.corsesList).then((res) => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            row.rowEdit = false;
            // this.dialogVisible = false;
            this.getList();
            this.editDisabled = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
        return false;
      }
      let _this = this;

      // addCourses(this.corsesList).then((res) => {

      //   if ((res.data.code = "200")) {
      //     this.newPoId = res.data.code;
      //     this.$message.success(res.data.message);
      //     this.dialogVisible = false;

      //     this.courseList = ""; //清空新增数组
      //     this.getList(this.poId);
      //   }
      // });
    },

    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
        const filterVal = [
          "id",
          "title",
          "author",
          "pageviews",
          "display_time",
        ];
        const list = this.list;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType,
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
